<template>
  <div class="iro-game">
    <h2>推荐游戏</h2>
    <div class="cards-grid">
      <!-- Skeleton Loading -->
      <template v-if="loading">
        <div class="card-container" v-for="n in 12" :key="'skeleton-'+n">
          <div class="skeleton-image"></div>
          <div class="skeleton-content">
            <div class="skeleton-title"></div>
            <div class="skeleton-subtitle"></div>
          </div>
        </div>
      </template>

      <!-- Actual Content -->
      <template v-else>
        <div class="card-container" v-for="(item, index) in cards" :key="index">
          <img :src="item.url" alt="" class="game-image">
          <div class="game-content">
            <p class="game-title">{{ item.title }}</p>
            <span class="game-info">{{ item.subtitle }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import game_img1 from '@/assets/imgs/game_center/game_img1.png'

const loading = ref(true)
const cards = ref([
  { url: game_img1, title: '绝区零（PC版）', subtitle: '★6.2 动作·米哈游' },
  { url: game_img1, title: '银与绿', subtitle: '首饰圆圈 ★7.4 角色...' },
  { url: game_img1, title: '影之诗', subtitle: '首饰圆圈 ★6 卡牌...' },
  { url: game_img1, title: '权剑传说', subtitle: '首饰圆圈 ★8.1 角色...' },
  { url: game_img1, title: '指间山海', subtitle: '首饰圆圈 ★8.2 角色...' },
  { url: game_img1, title: '永远的新蓝星球', subtitle: '新游榜第9名 ★6.6...' },
  { url: game_img1, title: '龙魂旅人', subtitle: '新游榜第10名...' },
  { url: game_img1, title: '英勇之地', subtitle: '新游榜第6名 ★5.9...' },
  { url: game_img1, title: '三国：谋定天下', subtitle: '高分游戏 ★9.2 策略...' },
  { url: game_img1, title: '盲盒派对', subtitle: '高分游戏 ★9.2 休闲...' },
  { url: game_img1, title: '新三国志曹操传', subtitle: '★7.2 弹窗·SRPG...' },
  { url: game_img1, title: '交错战线', subtitle: '首饰圆圈 ★6.7 卡牌...' }
])

// Simulate loading delay
onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 1500)
})
</script>

<style scoped lang="scss">
.iro-game {
  padding: 30px;
  width: 100%;
  margin: 0 auto;

  h2 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
  }

  .cards-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;

    .card-container {
      background: white;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.2s;
      cursor: pointer;

      &:hover {
        transform: translateY(-4px);
      }

      .game-image {
        width: 100%;
        height: 120px;
        object-fit: cover;
      }

      .game-content {
        padding: 12px;

        .game-title {
          font-size: 14px;
          font-weight: 500;
          color: #333;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .game-info {
          font-size: 12px;
          color: #888;
        }
      }

      /* Skeleton Styles */
      .skeleton-image {
        width: 100%;
        height: 120px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
      }

      .skeleton-content {
        padding: 12px;

        .skeleton-title {
          height: 16px;
          width: 80%;
          background: #f0f0f0;
          margin-bottom: 8px;
          border-radius: 4px;
          animation: shimmer 1.5s infinite;
        }

        .skeleton-subtitle {
          height: 12px;
          width: 60%;
          background: #f0f0f0;
          border-radius: 4px;
          animation: shimmer 1.5s infinite;
        }
      }
    }
  }
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style>
